<!-- 模板 -->
<template>
  <div class="root">
    <Search></Search>
    <section>
      <div class="banner">
        <img :src="require('../assets/img/cate-banner.png')" alt="" />
      </div>
      <div class="content">
        <!-- 左边分类栏 -->
        <div class="left">
          <ul>
            <li
              :class="index === activeIndex ? 'el active' : 'el'"
              v-for="(item, index) in nav"
              :key="index + 1"
              @click="getActive(index)"
            >
              <a href="##">
                <img v-show="index === activeIndex" :src="activeImg" alt="" />
                {{ item }}
              </a>
            </li>
          </ul>
        </div>
        <!-- 右边展示栏 -->
        <div class="right">
          <van-pull-refresh @refresh="onRefresh" v-model="isLoading" success-text="刷新成功">
            <ul>
              <li v-for="(item, index) in list" :key="index + 1">
                <a href="##">
                  <div class="img">
                    <img :src="item.src" alt="" />
                  </div>
                  <div class="des">
                    <div class="title">
                      {{ item.title }}
                    </div>
                    <div class="intro">
                      {{ item.subtitle }}
                    </div>
                    <div class="watched">已有{{ item.num }}人观看</div>
                  </div>
                </a>
              </li>
            </ul>
          </van-pull-refresh>
        </div>
      </div>
    </section>
    <Footers :index1="index1"></Footers>
  </div>
</template>
<script>
import request from '../utils/request.js'
import Search from './Search.vue'
import Footers from './Footers.vue'
import activeImg from '../assets/img/cate-select.png'
import img1 from '../assets/img/cate-course.png'
import img3 from '../assets/img/cate-course3.png'
import img2 from '../assets/img/cate-course2.png'
export default {
  name: '',
  data() {
    return {
      isLoading: true,
      activeIndex: 0,
      activeImg,
      index: 0,
      index1: 1,
      nav: [
        '特别推荐',
        '职场提升',
        '编程与开发',
        '生活爱好',
        '设计创意',
        '产品与运营',
        '电商运营',
        '职业考试',
        '语言学习',
      ],
      count: 1,
      list: [
        {
          id: 1,
          title: '精通52本商业传记',
          subtitle: '423读好书',
          src: img1,
          num: 30,
        },
        {
          id: 2,
          title: 'Python零基础入门趣味课',
          subtitle: '423读好书',
          src: img2,
          num: 30,
        },
        {
          id: 3,
          title: '职场人的PPT进阶课',
          subtitle: '423读好书',
          src: img3,
          num: 30,
        },
        {
          id: 4,
          title: '基金定投实战课',
          subtitle: '423读好书',
          src: img1,
          num: 30,
        },
        {
          id: 5,
          title: '王佩丰Exce数据实战',
          subtitle: '423读好书',
          src: img2,
          num: 30,
        },
        {
          id: 6,
          title: '用手机拍出酷炫Vlog',
          intro: '423读好书',
          img: img3,
          watched: 30,
        },
      ],
    }
  },
  props: [],
  components: { Footers, Search },
  computed: {},
  filters: {},
  methods: {
    //获取激活状态的选项
    getActive(index) {
      this.activeIndex = index
      this.getUser(this.activeIndex + 1)
    },
    //根据选项的id发送请求获取信息
    async getUser(index) {
      let options = {
        url: '/choose',
        type: 'get',
        data: { id: index },
      }
      try {
        let { data: res } = await request(options)
        if (res.meta.status !== 200) {
          console.log(res.meta.msg)
        }
        if (res.data.length < this.count * 20) {
          return
        }
        this.list = res.data.splice((this.count - 1) * 20, this.count * 20)
      } catch (err) {
        console.log(err)
      }
    },
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        this.count++
        this.getUser(this.activeIndex + 1)
      }, 1000)
    },
  },
  created() {},
  mounted() {
    this.getUser(this.activeIndex + 1)
  },
}
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
section {
  font-size: 0.28rem;
  width: 100%;
  .banner {
    width: 100%;
    padding: 0 0.2rem;
    padding-bottom: 0.2rem;
    img {
      width: 100%;
    }
  }
  .content {
    display: flex;
    .left {
      width: 30%;
      overflow-y: auto;
      height: calc(100vh - 1.2rem - 3.6rem);
      background: #f5f5f5;
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        li {
          a {
            display: block;
            padding: 0.3rem 0.3rem;
            text-align: center;
            position: relative;
            img {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 0.13rem;
            }
          }
        }
        .active {
          a {
            font-weight: 600;
            background-color: #fff;
          }
        }
      }
    }
    .right {
      font-size: 0.26rem;
      width: 70%;
      overflow-y: auto;
      height: calc(100vh - 1.2rem - 3.6rem);
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        li {
          padding: 0.2rem;
          padding-top: 0;
          a {
            display: flex;
            .img {
              width: 45%;
              img {
                width: 100%;
              }
            }
            .des {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              margin-left: 0.1rem;
              width: 55%;
              .title {
                color: #333333;
              }
              .intro {
                color: #999;
                font-size: 0.24rem;
              }
              .watched {
                font-size: 0.2rem;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
}
</style>
